<template>
  <div class="leader">
    <!-- <button @click="ads">增加</button> -->
    <!-- <div
      v-for="item in childbox.min"
      :key="item.key"
      style="background: black; margin: 15px"
    >
      222
    </div> -->
    <div
      @click="dsetorys(item.key)"
      v-for="item in childbox.min"
      :key="item.key"
      class="boxchild"
      style="position: relative"
      @mouseover="emptyover(item.key)"
      @mouseleave="emptyleave(item.key)"
    >
      <el-empty description="title" :image-size="50" ref="empty"></el-empty>
      <!-- 现在的逻辑就是悬停盒子的时候把所选盒子的empty的display变为none -->
      <div class="father" ref="father">
        <router-link to="/box">
          <div class="boxchild1">
            <el-tooltip
              class="item"
              effect="dark"
              content="预览"
              placement="bottom"
            >
              <span class="el-icon-caret-left"></span>
            </el-tooltip>
          </div>
        </router-link>

        <div class="boxchild2">
          <el-tooltip
            class="item"
            effect="dark"
            content="编辑"
            placement="bottom"
          >
            <span class="el-icon-share"></span>
          </el-tooltip>
        </div>

        <div class="boxchild3">
          <el-tooltip
            class="item"
            effect="dark"
            content="更多"
            placement="bottom"
          >
            <span class="el-icon-more"></span>
          </el-tooltip>
        </div>
      </div>
    </div>
    <!-- <p class="boxp">{{ childbox.title }}</p> -->
  </div>
</template>

<script>
export default {
  name: "childbox",
  data() {
    return {
      childbox: {
        min: [],
        title: "标题",
      },
    };
  },
  methods: {
    ads() {
      this.childbox.min.push({
        key: this.childbox.min.length,
        titel: `这是${this.childbox.min.length}号容器`,
      });
    },

    emptyover(key) {
      this.$refs.empty[key].$el.style.display = "none";
      this.$refs.father[key].style.display = "flex";
    },
    emptyleave(key) {
      this.$refs.empty[key].$el.style.display = "block";
      this.$refs.father[key].style.display = "none";
    },
    dsetorys(key) {
      this.emptyleave(key);
    },
  },
};
</script>

<style scoped>
.leader {
  display: flex;
  flex-wrap: wrap;
}
.boxchild {
  margin: 15px;
  width: 8.75rem;
  height: 6.25rem;
  background: #fdfdfd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
  /* border: 1px solid black; */
}
.father {
  width: 100%;
  height: 100%;
  display: none;
  font-size: 25px;
  line-height: 100px;
  border-radius: 10px;
  /* display: none; */
}
.father:hover {
  background: #c2c4c6;
}

.father a {
  height: 100%;
  width: 33.33%;
  flex: 1;
  border-radius: 10px 0 0 10px;
}
.boxchild1:hover {
  background: #9a9b9b;
  border-radius: 10px 0 0 10px;
}
.boxchild2 {
  height: 100%;
  flex: 1;
}
.boxchild2:hover {
  background: #9a9b9b;
}
.boxchild3 {
  flex: 1;
  height: 100%;

  border-radius: 0 10px 10px 0;
}
.boxchild3:hover {
  background: #9a9b9b;
  border-radius: 0 10px 10px 0;
}
.boxp {
  margin-top: 6px;
  line-height: 20px;
  font-size: 13px;
  width: 8.75rem;
  height: 20px;
}
.item:hover {
  background: #9a9b9b;
}
.item {
  background: rgba(110, 110, 110, 0);
}
.el-empty__description {
  display: none;
}
</style>